<template>
    <div
        class="tm-tabBar flex-between-center"
        :style="{ borderTop: tabBarOptions.border ? `1px solid ${tabBarOptions.borderColor}` : '' }"
    >
        <slot></slot>
    </div>
</template>

<script>
import { reactive, toRefs, inject } from 'vue'
export default {
    name: 'tm-tab-bar',
    props: {
        options: {
            type: Object,
            default: {}
        },
    },
    setup(props) {
        const tabBarOptions = inject('tabBarOptions')

        const state = reactive({
            tabBarOpt: props.options,
        })

        return {
            tabBarOptions,
            ...toRefs(state)
        }
    },
}
</script>
<style lang="scss" scoped>
    .tm-tabBar {
        width: 100%;
        height: 50px;
        background-color: $color-white;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99;
        box-shadow: 0 0 5px #c7c7c7;
    }
</style>